<template>
  <view>

    <view class="box" style="padding-bottom: 10rpx">
      <view class="box-sel">
        <view @click="dtuSelect('all')"
          :class="searchParam.statusCode == 'all' ? 'box-sel-item box-sel-item-selected' : 'box-sel-item'">全部
        </view>
        <view @click="dtuSelect('good')"
          :class="searchParam.statusCode == 'good' ? 'box-sel-item box-sel-item-selected' : 'box-sel-item'">
          良好</view>
        <view @click="dtuSelect('bad')"
          :class="searchParam.statusCode == 'bad' ? 'box-sel-item box-sel-item-selected' : 'box-sel-item'">故障
        </view>
      </view>
    </view>
    <view class="box">

      <view class="box-input">
        <u-row>
          <u-col :span="1">
            <u-icon name="search" size="40rpx"></u-icon>
          </u-col>
          <u-col :span="11">
            <input v-model="searchParam.search" placeholder="输入地点、DTU名称、IMEI查询" border-style="none" />
          </u-col>
        </u-row>
      </view>
    </view>

    <view class="box" style="background-color: rgba(0,0,0,0);">
      <view style="height: 20rpx"></view>
      <view  v-for="(item, index) in bodyData" v-show="checkFilter(item)">
        <dtuItem :item="item"
      ></dtuItem>

      </view>
      
    </view>



    <view style="height: 120rpx"></view>

  </view>
</template>

<script>
import dtuItem from './dtu-item.vue';

export default {
  components: {
    dtuItem
  },
  data() {
    return {

      bodyData: [
        // {
        //   "statusCode": "good",
        //   "address": null,
        //   "detailAddress": null,
        //   "fileIdOfImage": null,
        //   "gmtCreate": 1702457490807,
        //   "gmtModified": 1702457490807,
        //   "id": 492835181862917,
        //   "imei": "863482060483969",
        //   "isInit": false,
        //   "latitude": null,
        //   "longitude": null,
        //   "name": null,
        //   "org": { "name": "1号公司3" },
        //   "orgId": 1,
        //   "remark": null,
        //   "status": {
        //     "closingOperationCount": 20,
        //     "closingOperationFaultRecoveryTime": 0,
        //     "closingOperationRemainingTime": 0,
        //     "electricCurrent01": 0.0000600329,
        //     "electricCurrent02": 0.00527798,
        //     "electricCurrent03": 203.431,
        //     "electricCurrent04": 192.568,
        //     "frequency01": 5002,
        //     "frequency02": 682,
        //     "gmtCreate": null,
        //     "gmtModified": 1702457805470,
        //     "id": 492835179008005,
        //     "imei": "863482060483969",
        //     "leakageCurrentCount": 29,
        //     "leakageCurrentTimeLimit": 0,
        //     "leakageCurrentValue": 30,
        //     "leakageStatus": 0,
        //     "lightningStrikeCount": 8696,
        //     "lightningStrikeSingleTimeShieldTime": 0,
        //     "lightningStrikeVoltageSetting": 1000,
        //     "lowVoltageCount": 264,
        //     "lowVoltageTimeLimit": 0,
        //     "lowVoltageValue": 0,
        //     "numberOfreclosingActions": 0,
        //     "outputStatusIndication": 1,
        //     "overVoltageClosingVoltage": 600,
        //     "overVoltageCount": 25,
        //     "overVoltageStatus": 0,
        //     "overVoltageTimeLimit": 0,
        //     "overVoltageValue": 600,
        //     "overcurrentSettingClosingCount": 20,
        //     "overloadActionClosingCountdown": 0,
        //     "overloadClosingCountResetTime": 0,
        //     "overloadClosingOperationCount": 0,
        //     "overloadCount": 16,
        //     "overloadProtection": 10,
        //     "overloadStatus": 0,
        //     "overloadTimeLimit": 0,
        //     "saveCount": 0,
        //     "shortCircuitCount": 8,
        //     "shortCircuitStatus": 0,
        //     "totalReturn": 0,
        //     "underVoltageClosingVoltage": 0,
        //     "underVoltageStatus": 0,
        //     "voltage01": 224.52,
        //     "voltage02": 1819.01
        //   },
        //   "userIdOfInstall": null,
        //   "userOfInstall": {
        //     "realName": "张三",
        //     "phone": "13000000000",
        //   }
        // }
      ],
      // 显示的数据
      showData: [],
      // 查询参数
      searchParam: {
        // 搜索框
        search: "",
      /**
       * 全部：all
       * 良好：good
       * 故障：bad
       */
      statusCode: "all"
      },

    };
  },
  created() {
    this.getBodyData();
    uni.$on("busDtuFlush", () => {
      this.getBodyData();
    });


  },
  mounted() {
  },

  methods: {
    select(code) {
      this.searchParam.statusCode = code;
    },
    dtuSelect(code) {
      console.log(code);
      this.searchParam.statusCode = code;
    },

    getBodyData() {
      uni.showLoading({
        title: "加载中"
      });

      this.$request({
        url: '/business-dtu-web/dtu/getSelfDtu',
        method: 'POST',
        stateSuccess: (res) => {
          this.bodyData = res.data;
          this.$forceUpdate();
          uni.hideLoading();
        }
      })
    },


    /**
     * 条件检查
     */
    checkFilter(item){
      let search = this.searchParam.search;
      if (this.searchParam.statusCode != "all") {
        if (item.statusCode != this.searchParam.statusCode) {
          return false;
        }
      }
      if (item.name == null) {
        item.name = "";
      }
      if (item.imei == null) {
        item.imei = "";
      }
      if (item.address == null) {
        item.address = "";
      }
      if (item.detailAddress == null) {
        item.detailAddress = "";
      }
      if (item.remark == null) {
        item.remark = "";
      }
      if (item.name.indexOf(search) == -1 && item.imei.indexOf(search) == -1 && item.address.indexOf(search) == -1 && item.detailAddress.indexOf(search) == -1 && item.remark.indexOf(search) == -1) {
        return false;
      }
      return true;
    },




  },

  watch: {
  
  }
}
</script>

<style lang="scss" scoped>
.m-box {
  background-color: #fff;
  margin: 0;
  padding: 0;
  display: inline-block;

  .m {
    display: inline-block;
    font-size: 32rpx;
    color: #333;
    width: 50%;
    padding: 10rpx 20rpx;
    border: 1rpx solid #333;
    box-sizing: border-box;
    // 文字间距
    letter-spacing: 2rpx;
    margin: 0;
  }

  .m1 {
    border-radius: 30rpx 0 0 30rpx;
  }

  .m2 {
    border-radius: 0 30rpx 30rpx 0;
  }
}

.box {
  position: relative;
  width: 100%;
  padding: 0 30rpx 30rpx 30rpx;
  box-sizing: border-box;
  margin: 0;
  background-color: #FFFFFF;

  .location-tab {
    margin-top: 10rpx;
  }

  .box-input {
    background-color: #f0f0f0;
    padding: 20rpx;
    border-radius: 50rpx;
    font-size: 32rpx;
  }

  .box-sel {
    margin: 0;

    .box-sel-item {
      display: inline-block;
      margin: 10rpx;
      font-size: 30rpx;
      color: #333333;
    }

    .box-sel-item {
      display: inline-block;
      margin: 10rpx;
      font-size: 30rpx;
      color: #666666;
      padding: 0 0 10rpx 0;
      box-sizing: border-box;
    }

    .box-sel-item-selected {
      color: #000000;
      border-bottom: 2rpx solid #333333;
    }
  }

}

.cinema-box {
  position: relative;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}


.cinema-box:active {
  transform: scale(0.98);
}
</style>
